<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
  <title>250106-响应式布局</title>

  <!-- 引入bootstrap样式 -->
  <link rel="stylesheet" href="./assets/css/bootstrap.min.css">

  <!-- 引入wow.js样式 -->
  <link rel="stylesheet" href="./assets/css/animate.min.css">

  <!-- 引入重置样式 -->
  <link rel="stylesheet/less" href="./assets/css/reset.less">

  <!-- 引入页面样式 -->
  <link rel="stylesheet/less" href="./assets/css/index.less">
</head>

<body>
  <!-- 头部导航 -->
  <nav class="header navbar navbar-default">
    <div class="container">
      <!-- 左边Logo -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
          data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <div class="navbar-brand logo wow bounceInLeft">spirit8</div>
      </div>

      <!-- 右边导航 -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#banner" class="wow bounceInRight">home</a></li>
          <li><a href="#about" class="wow bounceInRight" data-wow-delay="0.1s">about</a></li>
          <li><a href="#team" class="wow bounceInRight" data-wow-delay="0.2s">team</a></li>
          <li><a href="#services" class="wow bounceInRight" data-wow-delay="0.3s">services</a></li>
          <li><a href="#clients" class="wow bounceInRight" data-wow-delay="0.4s">clients</a></li>
          <li><a href="#work" class="wow bounceInRight" data-wow-delay="0.5s">work</a></li>
          <li><a href="#testimonials" class="wow bounceInRight" data-wow-delay="0.6s">testmonials</a></li>
          <li><a href="#contact" class="wow bounceInRight" data-wow-delay="0.7s">contact</a></li>
        </ul>
      </div>
  </nav>

  <!-- 第一页内容 -->
  <div class="banner" id="banner">
    <!-- title文字 -->
    <div class="title wow bounceInLeft" data-wow-delay="0.8s">welcome on <span>spirit8</span></div>
    <!-- 描述文字 -->
    <div class="desc wow bounceInRight" data-wow-delay="1s">
      We are a digital agency with
      <span>years of experience</span>
      and with
      <span>extraordinary people</span>
    </div>
    <!-- 更多按钮 -->
    <a href="#contact" class="more-btn wow bounceIn">↓</a>
  </div>

  <!-- 第二页内容 -->
  <div class="about" id="about">
    <div class="container">
      <!-- 左边 -->
      <div class="left wow fadeInDown">
        <img src="./assets/images/about-background.png" alt="">
      </div>
      <!-- 右边 -->
      <div class="right">
        <div class="title">
          <div class="top wow fadeInDownBig">about us</div>
          <div class="bottom wow fadeInDownBig" data-wow-delay="0.1s">
            <span>some</span>
            words
            <span>about us</span>
          </div>
        </div>
        <p class="content wow fadeInUpBig" data-wow-delay="0.2s">
          We love building and rebuilding brands through our
          specific skills. Using colour, fonts, and illustration,
          we brand companies in a way they will never forget.
        </p>
        <ul class="list">
          <li class="wow fadeInUpBig" data-wow-delay="0.3s">
            <span class="glyphicon glyphicon-record" aria-hidden="true"></span>
            <span>Mission - </span>
            We deliver uniqueness and quality
          </li>
          <li class="wow fadeInUpBig" data-wow-delay="0.4s">
            <span class="glyphicon glyphicon-record" aria-hidden="true"></span>
            <span>Skills - </span>
            Delivering fast and excellent results
          </li>
          <li class="wow fadeInUpBig" data-wow-delay="0.5s">
            <span class="glyphicon glyphicon-record" aria-hidden="true"></span>
            <span>Clients - </span>
            atisfied clients thanks to our experience
          </li>
        </ul>
        <div class="more wow fadeIn" data-wow-delay="0.6s">
          <span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
          <span>browse our work</span>
        </div>
      </div>
    </div>
  </div>

  <!-- 第三页内容 -->
  <div class="team" id="team">
    <div class="container">
      <div class="subject wow bounceInDown">Meet <span>our team</span></div>

      <div class="list">
        <div class="item wow bounceInDown" data-wow-delay="100ms">
          <div class="photo">
            <img src="./assets/images/img1.jpg" />
          </div>
          <div class="content">
            <div class="name">Jason Statham</div>
            <div class="job">Knife designer</div>
            <div class="desc">
              Do not seek to change what has come before.
              Seek to create that which has not.
            </div>
          </div>
        </div>
        <div class="item wow bounceInDown" data-wow-delay="200ms">
          <div class="photo">
            <img src="./assets/images/img2.jpg" />
          </div>
          <div class="content">
            <div class="name">Van Damme</div>
            <div class="job">No Engilsh</div>
            <div class="desc">
              Do not seek to change what has come before.
              Seek to create that which has not.
            </div>
          </div>
        </div>
        <div class="item wow bounceInDown" data-wow-delay="300ms">
          <div class="photo">
            <img src="./assets/images/img3.jpg" />
          </div>
          <div class="content">
            <div class="name">Sylvester Stallone</div>
            <div class="job">Cigar Lover</div>
            <div class="desc">
              Do not seek to change what has come before.
              Seek to create that which has not.
            </div>
          </div>
        </div>
        <div class="item wow bounceInDown" data-wow-delay="400ms">
          <div class="photo">
            <img src="./assets/images/img5.jpg" />
          </div>
          <div class="content">
            <div class="name">Jet Li</div>
            <div class="job">I need more money</div>
            <div class="desc">
              Do not seek to change what has come before.
              Seek to create that which has not.
            </div>
          </div>
        </div>
      </div>

      <div class="more">
        <span class="wow bounceInDown" data-wow-delay="100ms"></span>
        <span class="wow bounceInDown" data-wow-delay="200ms"></span>
        <span class="wow bounceInDown" data-wow-delay="300ms"></span>
      </div>
    </div>
  </div>

  <!-- 第四页内容 -->
  <div class="services" id="services">
    <div class="container">
      <div class="subject wow bounceInDown">
        take a look at
        <span>our services</span>
      </div>
      <p class="content wow bounceInDown" data-wow-delay="0.3s">
        Lorem Ipsum comes from sections 1.10.32 and 1.10.33
        of "de Finibus Bonorum et Malorum" (The Extremes of Good
        and Evil) by Cicero, written in 45 BC. This book is a treatise
        on the theory of ethics, very popular during the Renaissance.
        The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..",
        comes from a line in section 1.10.32.
      </p>
      <div class="list">
        <div class="item wow bounceInDown" data-wow-delay="0.5s">
          <div class="icon">
            <img src="./assets/images/cpmputer.png" alt="">
          </div>
          <div class="characters">
            <div class="title">web design</div>
            <p class="text">
              The first line of Lorem Ipsum, "Lorem ipsum dolor sit
              amet..", comes from a line in section 1.10.32.
            </p>
          </div>
        </div>

        <div class="item wow bounceInDown" data-wow-delay="0.6s">
          <div class="icon">
            <img src="./assets/images/phone.png" alt="">
          </div>
          <div class="characters">
            <div class="title">mobile apps</div>
            <p class="text">
              The first line of Lorem Ipsum, "Lorem ipsum dolor sit
              amet..", comes from a line in section 1.10.32.
            </p>
          </div>
        </div>

        <div class="item wow bounceInDown" data-wow-delay="0.7s">
          <div class="icon">
            <img src="./assets/images/camera.png" alt="">
          </div>
          <div class="characters">
            <div class="title">photography</div>
            <p class="text">
              The first line of Lorem Ipsum, "Lorem ipsum dolor sit
              amet..", comes from a line in section 1.10.32.
            </p>
          </div>
        </div>

        <div class="item wow bounceInDown" data-wow-delay="0.8s">
          <div class="icon">
            <img src="./assets/images/speaker.png" alt="">
          </div>
          <div class="characters">
            <div class="title">marketing</div>
            <p class="text">
              The first line of Lorem Ipsum, "Lorem ipsum dolor sit
              amet..", comes from a line in section 1.10.32.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 第五页内容 -->
  <div class="clients" id="clients">
    <div class="container">
      <div class="subject wow zoomIn">some of <span>our clients</span> </div>
      <div class="desc wow zoomIn" data-wow-delay="0.5s">
        <img src="./assets/images/chanel.png" alt="">
        <img src="./assets/images/zara.png" alt="">
        <img src="./assets/images/guerlain.png" alt="">
        <img src="./assets/images/lancome.png" alt="">
        <img src="./assets/images/lacoste.png" alt="">
      </div>
      <div class="more">
        <span class="wow zoomIn" data-wow-delay="0.7s"></span>
        <span class="wow zoomIn" data-wow-delay="0.8s"></span>
        <span class="wow zoomIn" data-wow-delay="0.9s"></span>
      </div>
    </div>
  </div>

  <!-- 第六页内容 -->
  <!-- work -->
  <div class="work" id="work">
    <div class="container">
      <div class="subject wow bounceInDown">take a look at <span>our work</span></div>

      <div class="desc wow bounceInDown" data-wow-delay="100ms">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of
        "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a
        treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem
        ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>

      <div class="box">
        <div class="top">
          <div class="left wow bounceInDown">Filter by type</div>
          <div class="right">
            <a class="wow bounceInDown" data-wow-delay="100ms" href="javascript:void(0)">All</a>
            <a class="wow bounceInDown" data-wow-delay="200ms" href="javascript:void(0)">Web design</a>
            <a class="wow bounceInDown" data-wow-delay="300ms" href="javascript:void(0)">Mobile design</a>
            <a class="wow bounceInDown" data-wow-delay="400ms" href="javascript:void(0)">Photograpy</a>
          </div>
          <select class="option wow bounceInDown" name="option" data-wow-delay="200ms">
            <option>All</option>
            <option>Web design</option>
            <option>Mobile design</option>
            <option>Photograpy</option>
          </select>
        </div>

        <div class="list">
          <div class="item wow bounceInDown" data-wow-delay="100ms">
            <img src="./assets/images/work-img.png" />
            <div class="mask">
              <div class="title">Trend and fashion</div>
              <div class="short">Website design</div>
              <div class="btns">+</div>
            </div>
          </div>
          <div class="item wow bounceInDown" data-wow-delay="120ms">
            <img src="./assets/images/work-img.png" />
            <div class="mask">
              <div class="title">Trend and fashion</div>
              <div class="short">Website design</div>
              <div class="btns">+</div>
            </div>
          </div>
          <div class="item wow bounceInDown" data-wow-delay="140ms">
            <img src="./assets/images/work-img.png" />
            <div class="mask">
              <div class="title">Trend and fashion</div>
              <div class="short">Website design</div>
              <div class="btns">+</div>
            </div>
          </div>
          <div class="item wow bounceInDown" data-wow-delay="160ms">
            <img src="./assets/images/work-img.png" />
            <div class="mask">
              <div class="title">Trend and fashion</div>
              <div class="short">Website design</div>
              <div class="btns">+</div>
            </div>
          </div>
          <div class="item wow bounceInDown" data-wow-delay="180ms">
            <img src="./assets/images/work-img2.png" />
            <div class="mask">
              <div class="title">Trend and fashion</div>
              <div class="short">Website design</div>
              <div class="btns">+</div>
            </div>
          </div>
          <div class="item wow bounceInDown" data-wow-delay="200ms">
            <img src="./assets/images/work-img2.png" />
            <div class="mask">
              <div class="title">Trend and fashion</div>
              <div class="short">Website design</div>
              <div class="btns">+</div>
            </div>
          </div>
          <div class="item wow bounceInDown" data-wow-delay="220ms">
            <img src="./assets/images/work-img2.png" />
            <div class="mask">
              <div class="title">Trend and fashion</div>
              <div class="short">Website design</div>
              <div class="btns">+</div>
            </div>
          </div>
          <div class="item wow bounceInDown" data-wow-delay="240ms">
            <img src="./assets/images/work-img2.png" />
            <div class="mask">
              <div class="title">Trend and fashion</div>
              <div class="short">Website design</div>
              <div class="btns">+</div>
            </div>
          </div>
          <div class="item wow bounceInDown" data-wow-delay="260ms">
            <img src="./assets/images/work-img3.png" />
            <div class="mask">
              <div class="title">Trend and fashion</div>
              <div class="short">Website design</div>
              <div class="btns">+</div>
            </div>
          </div>
          <div class="item wow bounceInDown" data-wow-delay="280ms">
            <img src="./assets/images/work-img3.png" />
            <div class="mask">
              <div class="title">Trend and fashion</div>
              <div class="short">Website design</div>
              <div class="btns">+</div>
            </div>
          </div>
          <div class="item wow bounceInDown" data-wow-delay="300ms">
            <img src="./assets/images/work-img3.png" />
            <div class="mask">
              <div class="title">Trend and fashion</div>
              <div class="short">Website design</div>
              <div class="btns">+</div>
            </div>
          </div>
          <div class="item wow bounceInDown" data-wow-delay="320ms">
            <img src="./assets/images/work-img3.png" />
            <div class="mask">
              <div class="title">Trend and fashion</div>
              <div class="short">Website design</div>
              <div class="btns">+</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 第七页内容 -->
  <div class="testimonials" id="testimonials">
    <div class="container">
      <div class="subject wow zoomIn">
        <span>our clients'</span> testimonials
      </div>

      <p class="content  wow zoomIn" data-wow-delay="0.5s">
        This book is a treatise on the theory of ethics,
        very popular during the Renaissance. The first
        line of Lorem Ipsum, "Lorem ipsum dolor sit amet..",
        comes from a line in section 1.10.32.
      </p>

      <div class="ceo  wow zoomIn" data-wow-delay="0.6s">Dean Martin, <span>CEO Acme Inc</span></div>

      <div class="more">
        <span class="wow zoomIn" data-wow-delay="0.7s"></span>
        <span class="wow zoomIn" data-wow-delay="0.8s"></span>
        <span class="wow zoomIn" data-wow-delay="0.9s"></span>
      </div>
    </div>
  </div>

  <!-- contact -->
  <div class="contact" id="contact">
    <div class="container">
      <div class="subject wow bounceInDown">feel free to <span>contact us</span></div>

      <div class="desc wow bounceInDown" data-wow-delay="100ms">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of
        "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a
        treatise on the theory of ethics, very popular during the Renaissance. </div>

      <form>
        <div class="box">
          <div class="top">
            <div class="item wow bounceInDown" data-wow-delay="100ms">
              <div>Name <sup>*</sup></div>
              <input type="text" name="username" placeholder="请输入昵称" required />
            </div>
            <div class="item wow bounceInDown" data-wow-delay="300ms">
              <div>Email Address <sup>*</sup></div>
              <input type="email" name="email" placeholder="请输入邮箱" required />
            </div>
          </div>
          <div class="content wow bounceInDown" data-wow-delay="400ms">
            <div>Message <sup>*</sup></div>
            <textarea name="content" placeholder="请输入留言内容" rows="8" required></textarea>
          </div>
          <div class="action wow bounceInDown" data-wow-delay="450ms">
            <button type="submit" class="send">Send</button>
          </div>
        </div>
      </form>
    </div>
  </div>

  <!-- footer -->
  <footer class="footer">
    <div class="container">
      <p class="copyright wow bounceInDown">ALL RIGHTS RESERVED. COPYRIGHT © 2014 <span>SPIRIT8</span></p>

      <div class="list">
        <a class="wow bounceInDown" data-wow-delay="100ms" href="javascript:void(0)">
          <img src="./assets/images/footer1.png">
        </a>
        <a class="wow bounceInDown" data-wow-delay="200ms" href="javascript:void(0)">
          <img src="./assets/images/footer2.png">
        </a>
        <a class="wow bounceInDown" data-wow-delay="300ms" href="javascript:void(0)">
          <img src="./assets/images/footer3.png">
        </a>
        <a class="wow bounceInDown" data-wow-delay="400ms" href="javascript:void(0)">
          <img src="./assets/images/footer4.png">
        </a>
        <a class="wow bounceInDown" data-wow-delay="500ms" href="javascript:void(0)">
          <img src="./assets/images/footer5.png">
        </a>
      </div>
    </div>
  </footer>

  <!-- 返回顶部 -->
  <div class="backup">
    <a href="#banner" class="top">
      <img src="./assets/images/top.svg" />
    </a>
  </div>

</body>

</html>

<!-- 引入jquery 因为使用bootstrap需要jquery -->
<script src="./assets/js/jquery.min.js"></script>

<!-- 引入bootstrap的JS文件 -->
<script src="./assets/js/bootstrap.min.js"></script>

<!-- 引入wow.js -->
<script src="./assets/js/wow.min.js"></script>
<script>
  // 初始化
  new WOW().init();
</script>

<!-- 引入less 将css解析为less-->
<script src="./assets/js/less.min.js"></script>